<template>
	<div class="cart">
	    <header class="bar bar-nav">
			<router-link to="/city" class="cart-nav-place">广州</router-link>
			<h1 class="title">购物车</h1>
		</header>
		<div class="cart-content">
			<!-- /*未购物的购物车*/ -->
			<div class="carDiv" v-if="isEmpty">
				<img src="http://img02.yiguo.com/e/web/150703/00781/140145/cart-none.png">
				<p>购物车是空的</p>
				<router-link to="/home" class="qgg">去逛逛</router-link>
			</div>
			<!-- /*已购物的购物车*/ -->
			<div class="carDiving" v-else>
				<!-- <cartProduct :checkboxM="checkboxModel"></cartProduct> -->
				<div v-for="(obj,i) in shopCartList" class="cart-product " v-on:touchstart="cpMoveStart($event,i)" v-on:touchmove="cpMove($event,i)" v-on:touchend="cpMoveEnd($event,i)">
					<div class="cp-above row no-gutter">
						<input class="cp-check col-10" type="checkbox"  v-model="checkboxModel" :value="i" >
						{{i}}<img class="col-25 cp-mid" v-bind:src="obj.img">
						<div class="col-65 cp-right">
							<p class="cp-name">{{obj.name}}</p>
							<p class="cp-price"><span>¥{{obj.price}}</span><span>{{obj.units}}</span></p>
							<!-- <counter v-bind:num="item.num"></counter> -->
							<div class="cp-counter">
								<a href="javascript:void(0)" v-on:click.stop="obj.num==1?1:obj.num--" v-on:click="counterFn">-</a>
								<input type="text" name="" v-bind:value="obj.num">
								<a href="javascript:void(0)" v-on:click.stop="obj.num++"  v-on:click="counterFn">+</a>
							</div>
						</div>
					</div>
					<div class="cp-below" v-on:click="cpDele(i)">
						<span class="cp-dele">删除</span>
					</div>
				</div>
			</div>
			<!-- 结算 -->
			<!-- <clearing></clearing> -->
			<!-- 结算 -->
			<div class="cart-clearing row no-gutter">
				<input v-model="checked" v-on:click="checkedAll" class="Allcheck col-10" id="checkbox" type="checkbox">
				<label class="col-10" for="checkbox" >全选</label>
				<div class="clearPrice col-60">
					<p>优惠:<span>￥0.00</span></p>
					<p>商品总额:<span>￥{{allPrice}}</span></p>
				</div>
				<router-link to="/Ddjs" class="clearBtn col-30">去结算({{checkboxModel.length}})</router-link>
			</div>
		</div>
		<!-- 是否删除提示框 -->
		<div class="deleDiv">
			<div>
				<p>您是否要删除该商品?</p>
				<div class="row no-gutter">
					<a class="col-50" v-on:click="prDele(false)" href="javascript:void(0)">取消</a>
					<a class="col-50" v-on:click="prDele(true)" href="javascript:void(0)">确定</a>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
// import Clearing from "./component/clearing.vue";
import Counter from "../../components/counter.vue";
	export default {
		data(){
			return{
				isEmpty:true,
				checked:true,
				checkboxModel:[],
				shopCartList:[],
				// 产品
				s:0,
				SStart:0,
				mds:0,
				allPrice:0,
				deleI:0,//删除产品列表的哪个的下标
			}
		
		},
		components:{
			Counter
		},
		created:function(){
			// 获取本地存储里shopCart数组
			this.shopCartList=JSON.parse(localStorage.getItem("shopCart"))||[];
		},
		mounted:function(){
			$(".cartNone").show();

		    if(getCookie().userName==true){
				// 一开始加载的时候全选
				this.checkboxModel=[];
				for (var i = 0; i < this.shopCartList.length; i++) {
					this.checkboxModel.push(i);
				}

				this.cartNullFn();
		    }else{
		    	this.$router.push("/login");
		    }
			

		},
		methods:{
			// 判断购物车是否为空
			cartNullFn:function(){
				if(this.shopCartList.length==0){
					this.isEmpty=true;
				}else{
					this.isEmpty=false;
				}
			},
			checkedAll:function(n){
				if(this.checked==false){
					this.checkboxModel=[];
				}else{
					this.checkboxModel=[];
					for (var i = 0; i < this.shopCartList.length; i++) {
						this.checkboxModel.push(i);
					}
				}
				this.counterFn();
			},
			// 计算总价格
			counterFn:function(){
				this.allPrice=0;
				var _this=this;
				 this.checkboxModel.forEach(function(i){
				 	// console.log(i);
					_this.allPrice+=parseInt(_this.shopCartList[i].price)*_this.shopCartList[i].num;

				 });
					
				
			},
			// 产品
			cpMoveStart:function(e,i){
				this.SStart=0;
				this.SStart=e.touches[0].clientX;
				this.mds=e.touches[0].clientX-$(".cp-above").eq(i).position().left;
			},
			cpMove:function(e,i){
				var SMove=e.touches[0].clientX-this.mds;
				$(".cp-above").eq(i).css({"left":SMove});

			},
			cpMoveEnd:function(e,i){
				// this.cpMove=null;
				// this.cpMove=null;
				var SEnd=e.changedTouches[0].clientX;
				var w=$(".cp-dele").width();
				if(this.SStart-SEnd>10){
					$(".cp-above").eq(i).animate({left:-w},"slow");
					
				}else if(SEnd-this.SStart>10){
					$(".cp-above").eq(i).animate({left:0},"slow");
				}
				
			},
			cpDele:function(i){
				$(".deleDiv").show();
				this.deleI=i;				
			},
			prDele:function(bol){
				$(".deleDiv").hide();
				var arr=JSON.parse(localStorage.getItem("shopCart"));
				if(bol==true){
					arr.splice(this.deleI,1);
				}
				this.shopCartList=arr;
				var str=JSON.stringify(arr);
				localStorage.setItem("shopCart",str);

				this.checkedAll();
				this.counterFn();
				// console.log(this.checkboxModel);
				this.cartNullFn();
			},

		
		},
		 beforeDestroy: function () {
		 	var str=JSON.stringify(this.shopCartList);
		 	localStorage.setItem("shopCart",str);
		 },
		watch:{
			checkboxModel:function(){
				if(this.checkboxModel.length==this.shopCartList.length){
					this.checked=true;
				}else{
					this.checked=false;
				}
				// console.log("checkboxModel"+this.checkboxModel);
				this.counterFn();
			}

		},

	}
</script>

<style type="text/css">
	/*<!-- 是否删除提示框 -->*/
	.deleDiv{
		position: fixed;
		z-index: 100;
		width: 100%;
		height: 100%;
		background:rgba(0,0,0,0.4);
		top: 0;left: 0;
		display: none;
	}
	.deleDiv>div{
		width: 60%;
		background: white;
		text-align: center;
		border-radius:5px;
		margin:0 auto;
		margin-top:70%;
	}
	.deleDiv>div>p{
		padding: .8rem 0;
	}
	.deleDiv>div>div a{
		display: inline-block;
		font-size: 0.7rem;
		color: #333;
		padding: 0.4rem 0;
		border-top: 0.5px solid #dbd8d8;
	}
	.deleDiv>div>div a:first-child{
		border-right: 0.5px solid #dbd8d8;
	}

.cart{
	padding-top:2.2rem;
}
.title{color:#16bb7d;background: white;}
	.cart-nav-place{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #16bb7d;
		z-index: 2;
		left: 1rem;
	}

	/*.cart-content{width: 100%;}*/
	/*未购物的购物车*/
	.carDiv{
		width: 100%;
		text-align: center;
		/*display: none;*/
	}
	.carDiv>img{
		width: 20%;
		padding-top: 90px;
	}
	.carDiv>p{color: #008842;font-weight: bold;}
	.carDiv .qgg{
		display: block;
		width: 100px;height: 35px;
		line-height: 35px;
		margin: auto;
		color: white;
		background: #008842;
		border: none;
		border-radius: 5px;
		margin-top: 20px;
	}
	/*已购物的购物车*/
.carDiving{
	/*display: none;*/
	padding-bottom:2.5rem;
}
/*结算*/
	.cart-clearing{
		position: fixed;
		width: 100%;
		bottom: 2.5rem;
		left: 0;
		background: #cecdcd;
		font-size: 12px;
		height: 2.5rem;
		z-index: 10;
		/*line-height: 50px;*/
	}
	.Allcheck{
		position: relative;
		top: 17px;
	}
	.cart-clearing label,.clearBtn{
		line-height: 50px;
	}
	.clearPrice p{
		line-height: 25px;
	}
	.clearPrice p span{
		color: #fb3d3d;
	}
	.clearBtn{
		display: inline-block;
		width: 20%;
		background: #fb3d3d;
		color: white;
		font-size: 14px;
		text-align: center;
	}
	

	/*产品*/
.cart-product{
	/*background: white;*/
	border-bottom: 1px solid #e1e1e1;
	position: relative;
	height: 86px;
	overflow: hidden;
}
.cp-above{
	position:absolute;
		height: 86px;
	width:100%;
	z-index: 10;
	background: white;
	top: 0;left: 0;
	margin-left: 0;
}
	.cp-check{
		position:relative;
		top: 36px;
		left: 0.3rem;

	}
	.cp-mid{
		width: 85px;height: 85px;
	}
	.cp-right{
		font-size: 14px;
		padding-left: .3rem;
	}
	.cp-right p.cp-price{
		padding-top: 10px;
	}
	
	.cp-below{
		position: relative;
		width: 100%;
	}
	.cp-dele{
		display: inline-block;
		position: relative;
		width: 20%;height:85px;
		line-height: 85px;
		top: 0%;
		left: 80%;
		background:#fb3d3d;
		color: white;
		text-align: center;
		z-index: 1;
	}
	.cp-counter{
		display: inline-block;
		border: 1px solid #a3a2a2;
		border-radius: 5px;
	}
	.cp-counter a{
		padding: 8px;
		color: #666;
		float: none!important;
	}
	.cp-counter input{
		width: 30px;
		height: 23px;
		text-align: center;
		border: none;
		border-left: 1px solid #a3a2a2;
		border-right: 1px solid #a3a2a2;
	}
</style>
